<template>
    <div class="container">

        <Header></Header>

        <div class="body">
            <transition name="el-zoom-in-center">
                <div class="body_container">
                    <div class="body_title">
                        登录
                    </div>
                    <div class="username">
                        <div>
                            <el-input placeholder="username" v-model="username" clearable></el-input>
                        </div>
                    </div>
                    <div class="password">
                        <div>
                            <el-input placeholder="password" v-model="password" show-password clearable></el-input>
                        </div>
                    </div>
                    <div class="submit">
                        <div>
                            <el-button @click="submit">登录</el-button>
                        </div>
                    </div>
                </div>
            </transition>
        </div>

        <div class="footer">

        </div>
    </div>
</template>

<script>
    import Header from "@/components/Header";
    export default {
        name: "Login",
        components: {Header},
        data(){
            return{
                username: null,
                password: null
            }
        },
        methods:{
            submit:function () {
                this.axios.get("/get_auth",
                    {params:{
                        "username": this.username,
                        "password": this.password
                        }})
                .then(res => {
                    res = res.data
                    console.log(res)
                    console.log(res.data.token)
                    if (res.code === 200){
                        this.$message({
                            message: 'success',
                            type: 'success'
                        })
                        sessionStorage.setItem("name", this.username)
                        sessionStorage.setItem("token", res.data.token)
                        window.location.href = './'
                    } else {
                      console.log(res.request)
                        this.$message({
                            message: "code: " + res.code + " msg: " + res.msg,
                            type: 'warning'
                        })
                        console.log("code:", res.code,"msg: ",res.msg)
                    }
                })
                .catch(e => {
                    this.$message({
                        message: e,
                        type: "error"
                    })
                    console.log(e)
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .container{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        /*div{*/
        /*    border: 1px solid;*/
        /*}*/



        .body{
            flex-grow: 2;
            display: flex;
            flex-direction: row;
            justify-content: center;

            .body_container{
                display: flex;
                flex-direction: column;
                width: 40%;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

                .el-input{
                    width: 50%;
                    &:hover{
                        border: darkgrey !important;
                    }

                    &:focus-within{
                        border: grey !important;
                    }
                }

                .body_title{
                    flex-grow: 1.5;
                    padding-top: 60px;
                    padding-bottom: 20px;
                    font-size: 24px;
                    font-weight: 500;
                    font-family: 楷体,serif;
                }

                .username{
                    flex-grow: 1;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                .password{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    flex-grow: 1;
                }

                .submit{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    flex-grow: 2;

                    .el-button{
                        width: 30%;
                        background-color: darkgrey !important;
                        border: grey !important;
                        color: white !important;

                        &:hover{
                            background-color: gray !important;
                        }
                    }
                }
            }
        }

        .footer{
            flex-grow: 1;
        }
    }
</style>
